<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hierarchy Tags Info</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 10px;
      }
      pre {
        white-space: pre-wrap;
      }
    </style>  
  </head>
  <body>
    <h2>Hierarchy Tags Info</h2>
    <button id="getTagsButton">Get Tags Info</button>
    <pre id="tagsInfo"></pre>

    <script>
      document.getElementById("getTagsButton").addEventListener("click", () => {
        chrome.runtime.sendMessage(
          { action: "getHierarchyInfo" },
          (response) => {
            if (response.success) {
              document.getElementById("tagsInfo").textContent = JSON.stringify(
                response.data,
                null,
                2
              );
            } else {
              document.getElementById("tagsInfo").textContent =
                "Error: " + response.error;
            }
          }
        );
      });
    </script>
  </body>
</html>
